<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'AxisAlignedBoundingBox',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addBoundingBox();
        },
        methods: {
            initCesium: function () {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    })
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addBoundingBox() {
                //包围盒的点集
                const positions = Cesium.Cartesian3.fromDegreesArray([
                    113.23279023170471,
                    23.0951874543701,
                    113.23238253593443,
                    23.09495059893952,
                    113.23276877403259,
                    23.094397934644462,
                    113.23265075683594,
                    23.093973565874975,
                    113.23480725288391,
                    23.093993303987,
                    113.23536515235901,
                    23.09463479104927,
                    113.23449611663817,
                    23.09540457148131,
                    113.23279023170471,
                    23.0951874543701
                ]);

                //构建包围盒的多边形几何体
                let polygon1 = new Cesium.PolygonGeometry({
                    polygonHierarchy: new Cesium.PolygonHierarchy(
                        positions
                    )
                });
                let geometry1 = Cesium.PolygonGeometry.createGeometry(polygon1);

                //构建多边形的实例
                let polygon = new Cesium.GeometryInstance({
                    geometry: geometry1,
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE)
                    },
                    id: 'polygonInstance1'
                });
                // Cesium.AxisAlignedBoundingBox.fromPoints()
                //构建一个AABB的包围盒
                let boundingBox1 = Cesium.AxisAlignedBoundingBox.fromPoints(positions);
                //通过AABB构建一个包围盒的实例
                let boxGeometry1 = Cesium.BoxGeometry.fromAxisAlignedBoundingBox(boundingBox1);

                let boxInstance1 = new Cesium.GeometryInstance({
                    geometry: boxGeometry1,
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOWGREEN.withAlpha(0.4))
                    }
                });

                // Cesium.AxisAlignedBoundingBox.fromCorners()
                let maximum = boundingBox1.maximum;
                let minimum = boundingBox1.minimum;
                //通过对角对称的坐标点计算AABB包围盒
                let boundingBox2 = Cesium.AxisAlignedBoundingBox.fromCorners(minimum, maximum);
                let boxGeometry2 = Cesium.BoxGeometry.fromAxisAlignedBoundingBox(boundingBox2);
                //构建包围盒的实例
                let boxInstance2 = new Cesium.GeometryInstance({
                    geometry: boxGeometry2,
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.4))
                    }
                });
                // new Cesium.AxisAlignedBoundingBox()
                //直接通过包围盒的最大坐标点和做小坐标点计算AABB包围盒
                let boundingBox3 = new Cesium.AxisAlignedBoundingBox(minimum, maximum);
                let boxGeometry3 = Cesium.BoxGeometry.fromAxisAlignedBoundingBox(boundingBox3);
                //构建包围盒实例
                let boxInstance3 = new Cesium.GeometryInstance({
                    geometry: boxGeometry3,
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE.withAlpha(0.4))
                    }
                });
                //构建图元
                let primitive = new Cesium.Primitive({
                    geometryInstances: [polygon, boxInstance1, boxInstance2, boxInstance3],
                    asynchronous: false,//是否采用多线程
                    appearance: new Cesium.PerInstanceColorAppearance({
                        translucent: true,
                        closed: true
                    })
                });
                //添加到图元
                this.viewer.scene.primitives.add(primitive);
                //定位
                this.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(113.23276877403259,
                        23.094397934644462, 2000.0), // 设置位置
                    orientation: {
                        heading: Cesium.Math.toRadians(20.0), // 方向
                        pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
                        roll: 0
                    }
                })
            }
        },

    }
</script>

